<!doctype html>
<html lang="en"xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="favicon.ico">
    <title>Tiny Dashboard - A Bootstrap Dashboard Template</title>
    <!-- Simple bar CSS -->
    <link rel="stylesheet" th:href="@{/dash/css/simplebar.css}">
    <!-- Fonts CSS -->
    <!--    <link href="https://fonts.googleapis.com/css2?family=Overpass:ital,wght@0,100;0,200;0,300;0,400;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">-->
    <!-- Icons CSS -->
    <link rel="stylesheet" th:href="@{/dash/css/feather.css}">
    <link rel="stylesheet" th:href="@{/dash/css/select2.css}">
    <link rel="stylesheet" th:href="@{/dash/css/dropzone.css}">
    <link rel="stylesheet" th:href="@{/dash/css/uppy.min.css}">
    <link rel="stylesheet" th:href="@{/dash/css/quill.snow.css}">
    <link rel="stylesheet" th:href="@{/dash/css/jquery.steps.css}">
    <link rel="stylesheet" th:href="@{/dash/css/jquery.timepicker.css}">
    <link rel="stylesheet" th:href="@{/dash/css/dataTables.bootstrap4.css}">
    <!-- Date Range Picker CSS -->
    <link rel="stylesheet" th:href="@{/dash/css/daterangepicker.css}">
    <!-- App CSS -->
    <link rel="stylesheet" th:href="@{/dash/css/app-light.css}" id="lightTheme">
    <link rel="stylesheet" th:href="@{/dash/css/app-dark.css}" id="darkTheme" disabled>
  </head>
  <body class="vertical  light  ">
  <div class="wrapper">
    <nav th:replace="~{comm/blank::topnav}"/>
    <aside th:replace="~{comm/blank::aside}"/>

    <main role="main" class="main-content">
      <div class="container-fluid">
        <div class="row justify-content-center">
          <div class="col-12">
            <!-- Slide Modal -->
            <div class="modal fade modal-slide" tabindex="-1" role="dialog" aria-labelledby="defaultModalLabel"
                 aria-hidden="true">
              <div class="modal-dialog" role="document">
                <div class="modal-content">
                  <div class="modal-header">
                    <h5 class="modal-title" id="defaultModalLabel">过滤条件</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                      <i class="fe fe-x fe-12"></i>
                    </button>
                  </div>
                  <div class="modal-body">
                    <div class="p-2">
                      <div class="form-row">
                        <p class="mb-2"><strong>按商品名搜索</strong></p>
                        <input id="item-name" type="text" class="form-control" placeholder="商品名">
                      </div>
                      <div class="form-group my-4">
                        <p class="mb-2"><strong>分类</strong></p>
                        <label for="multi-select2" class="sr-only"></label>
                        <select class="form-control select2-multi" id="multi-select2">
                          <optgroup label="可点击选择多个分类" class="type">
                            <!--                              <th:block th:if="${not (types==null) or types.isEmpty()}" th:each="type:${types}">-->
                            <th:block th:if="${types!=null}" th:each="type:${types.entrySet()}">
                              <option class="typeItem" th:value="${type.key}" th:text="${type.value}"></option>
                            </th:block>
                          </optgroup>
                        </select>
                      </div> <!-- form-group -->

                      <div class="form-row">
                        <p class="mb-2"><strong>按进货时间过滤</strong></p>
                      </div>
                      <div class="form-row">
                        <div class="form-group col-md-6">
                          <label for="startTime1">起始时间</label>
                          <input class="form-control" id="startTime1" type="date" name="date" value="2000-01-01">
                        </div>
                        <div class="form-group col-md-6">
                          <label>起始时间</label>
                          <div class="input-group">
                            <div class="input-group-prepend">
                              <div class="input-group-text"><span class="fe fe-clock fe-16"></span></div>
                            </div>
                            <input class="form-control" type="time" id="startTime2" name="time" value="00:00">
                          </div>
                        </div>
                      </div>
                      <div class="form-row">
                        <div class="form-group col-md-6">
                          <label for="endTime1">截止时间</label>
                          <input class="form-control" id="endTime1" type="date" name="date" value="2020-12-31">
                        </div>
                        <div class="form-group col-md-6">
                          <label>截止时间</label>
                          <div class="input-group">
                            <div class="input-group-prepend">
                              <div class="input-group-text"><span class="fe fe-clock fe-16"></span></div>
                            </div>
                            <input class="form-control" type="time" id="endTime2" name="time" value="00:00">
                          </div>
                        </div>
                      </div>

                      <!--                      <div class="form-row">-->
                      <!--                        <div class="form-group col-md-8">-->
                      <!--                          <label for="client">顾客</label>-->
                      <!--                          <select id="client" class="form-control select2 customer">-->
                      <!--                            <option>顾客1</option>-->
                      <!--                            <option>顾客2</option>-->
                      <!--                          </select>-->
                      <!--                        </div>-->
                      <!--                      </div>-->

                      <!--                        <div class="form-group my-4">-->
                      <!--                          <p class="mb-2">-->
                      <!--                            <strong>支付方式</strong>-->
                      <!--                          </p>-->
                      <!--&lt;!&ndash;                          <div class="custom-control custom-checkbox">&ndash;&gt;-->
                      <!--&lt;!&ndash;                            <input type="checkbox" class="custom-control-input" id="customCheck1">&ndash;&gt;-->
                      <!--&lt;!&ndash;                            <label class="custom-control-label" for="customCheck1">在线支付</label>&ndash;&gt;-->
                      <!--&lt;!&ndash;                          </div>&ndash;&gt;-->
                      <!--                          <div class="custom-control custom-checkbox">-->
                      <!--                            <input type="checkbox" class="custom-control-input" id="customCheck2">-->
                      <!--                            <label class="custom-control-label" for="customCheck2">现金支付</label>-->
                      <!--                          </div>-->
                      <!--                          <div class="custom-control custom-checkbox">-->
                      <!--                            <input type="checkbox" class="custom-control-input" id="customCheck1" checked>-->
                      <!--                            <label class="custom-control-label" for="customCheck1">在线支付</label>-->
                      <!--                          </div>-->

                      <!--                        </div> &lt;!&ndash; form-group &ndash;&gt;-->
                      <!--                        <div class="form-group my-4">-->
                      <!--                          <p class="mb-2">-->
                      <!--                            <strong>Types</strong>-->
                      <!--                          </p>-->
                      <!--                          <div class="custom-control custom-radio">-->
                      <!--                            <input type="radio" id="customRadio1" name="customRadio" class="custom-control-input">-->
                      <!--                            <label class="custom-control-label" for="customRadio1">End users</label>-->
                      <!--                          </div>-->
                      <!--                          <div class="custom-control custom-radio">-->
                      <!--                            <input type="radio" id="customRadio2" name="customRadio" class="custom-control-input" checked>-->
                      <!--                            <label class="custom-control-label" for="customRadio2">Whole Sales</label>-->
                      <!--                          </div>-->
                      <!--                        </div> &lt;!&ndash; form-group &ndash;&gt;-->

                      <!--                        <div class="form-group my-4">-->
                      <!--                          <p class="mb-2">-->
                      <!--                            <strong>Completed</strong>-->
                      <!--                          </p>-->
                      <!--                          <div class="custom-control custom-switch">-->
                      <!--                            <input type="checkbox" class="custom-control-input" id="customSwitch1">-->
                      <!--                            <label class="custom-control-label" for="customSwitch1">Include</label>-->
                      <!--                          </div>-->
                      <!--                        </div> &lt;!&ndash; form-group &ndash;&gt;-->
                    </div>
                  </div>
                  <div class="modal-footer">
                    <button type="button" id="submit" class="btn mb-2 btn-primary btn-block">Apply</button>
                    <button type="button" class="btn mb-2 btn-secondary btn-block">Reset</button>
                  </div>
                </div>
              </div>
            </div>
            <div class="row align-items-center my-4">
              <div class="col-12">
                <h2 class="h3 mb-0 page-title">收银台</h2>
              </div>
              <div class="col-12">
                <div class="col-md-auto ml-auto text-right" style="margin-bottom: 30px">
                  <!-- Button trigger modal -->
                  <button type="button" class="btn btn-info" data-toggle="modal" data-target="#cartModal">
                    <span class="fe fe-shopping-bag fe-12 mr-2"></span>核算
                  </button>
                  <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".modal-slide">
                    <span class="fe fe-filter fe-16 text-muted"></span>条件筛选
                  </button>
                </div>
                <!-- 购物车Modal -->
                <div class="modal fade" id="cartModal" tabindex="-1" role="dialog" aria-labelledby="cartModalLabel"
                     aria-hidden="true" th:fragment="cartModal">
                  <div class="modal-dialog modal-xl" role="document">
                    <div class="modal-content">
                      <div class="modal-header">
                        <h5 class="modal-title" id="cartModalLabel">购物车</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                          <span aria-hidden="true">&times;</span>
                        </button>
                      </div>
                      <div class="modal-body">
                        <div class="table-responsive">
                          <table class="table">
                            <thead>
                            <tr>
                              <th scope="col">商品</th>
                              <th scope="col">售价</th>
                              <th scope="col">会员价</th>
                              <th scope="col">数量</th>
                              <th scope="col">合计</th>
                              <th scope="col">删除</th>
                            </tr>
                            </thead>

                            <!-- 加一个循环each，未写 -->
                            <th:block th:if="${cart!=null}" th:each="cartEntry,cur:${cart}">
                              <tr class="product-single">
                                <td>
                                  <div class="media">
                                    <div class="d-flex">
                                      <img th:src="${cartEntry.key.image}" alt="" width="80px" height="60px">
                                    </div>
                                    <div class="media-body">
                                      <p th:text="${cartEntry.key.name}">Minimalistic shop for multipurpose use</p>
                                    </div>
                                  </div>
                                </td>
                                <td>
                                  <h5 class="c_price" th:text="${cartEntry.key.priceSell}">$360.00</h5>
                                </td>
                                <td>
                                  <h5 class="member_price" th:text="${cartEntry.key.type==2?cartEntry.key.priceSell*0.9:cartEntry.key.priceSell}">$360.00</h5>
                                </td>
                                <td class="product-qty">
                                  <input type="text" class="itemId" th:value="${cartEntry.key.id}"
                                         style="display: none">
                                  <div class="product_count">
                                    <input type="text" id="qty" name="qty" maxlength="6" th:value="${cartEntry.value}"
                                           title="Quantity:" class="input-text qty" style="width: 30px;">
                                    <button class="increase items-count" id="increase" type="button"><i
                                            class="fe fe-24 fe-plus"></i></button>
                                    <button class="reduced items-count" id="reduce" type="button"><i
                                            class="fe fe-24 fe-minus"></i></button>
                                  </div>
                                </td>
                                <td class="tmp-total">
                                  <h5 class="c_total" th:text="${cartEntry.key.priceSell}">$720.00</h5>
                                </td>
                                <td>
                                  <div class="product-del">
                                    <button class="btn-danger" onclick="removeItem(this)">删除</button>
                                  </div>
                                </td>
                              </tr>
                            </th:block>


                          </table>
                          <div class="modal-footer">
                            <input class="input_value" type="text" id="userName" name="userName" placeholder="请输入会员名" onfocus="this.placeholder = ''"
                                   onblur="this.placeholder = '请输入会员码';verifyUserExist()"><span id="uName">会员？</span>
                            <button type="button" class="btn mb-2 btn-secondary" data-dismiss="modal">关闭</button>
                            <button type="button" class="btn mb-2 btn-primary" onclick="tz()" data-dismiss="modal">结算
                            </button>
                          </div>
                        </div>
                      </div>
                    </div>
                    <!--                  <button type="button" class="btn btn-secondary"><span class="fe fe-trash fe-12 mr-2"></span>Delete</button>-->
                    <!--                  <button type="button" class="btn btn-primary"><span class="fe fe-shopping-bag fe-12 mr-2"></span>Create</button>-->
                  </div>
                </div>
                <div class="row" id="pick-content">
                  <th:block th:if="${items!=null}" th:each="item:${items}">
                    <div class="col-md-3">
                      <div class="card shadow mb-4">
                        <div class="card-body text-center">
                          <div class="avatar avatar-lg mt-4">
                            <a href="">
                              <img th:src="${item.image}" alt="..." class="avatar-img rounded-circle">
                            </a>
                          </div>
                          <div class="card-text my-2">
                            <p style="overflow: hidden;width: inherit;white-space: nowrap;text-overflow: ellipsis">
                              <strong class="card-title my-0" th:text="${item.name}"></strong>
                            </p>
                            <p class="small text-muted mb-0" th:text="${item.detail}"
                               style="overflow: hidden;width: inherit;white-space: nowrap;text-overflow: ellipsis"></p>
                            <p class="small"><span class="badge badge-dark" th:text="${types.get(item.type)}"></span>
                            </p>
                          </div>
                        </div> <!-- ./card-text -->
                        <div class="card-footer">
                          <div class="row align-items-center justify-content-between">
                            <div class="col-auto">
                              <small>
                                <span class="dot dot-lg bg-success mr-1"></span>[[${'库存: '+item.inventory}]]</small>
                            </div>
                            <div class="col-auto">
                              <div class="file-action">
                                <button type="button"
                                        class="btn btn-link dropdown-toggle more-vertical p-0 text-muted mx-auto"
                                        data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                  <span class="text-muted sr-only">Action</span>
                                </button>
                                <div class="dropdown-menu m-2">
                                  <input type="hidden" class="item-id" th:value="${item.id}" style="display:none;">
                                  <button class="add-cart dropdown-item" shiro:authenticated=""><i
                                          class="fe fe-plus-circle fe-12 mr-4"></i>加入购物车</button>
                                  <a class="dropdown-item" th:href="@{|/shop/detail/${item.id}|}"><i
                                          class="fe fe-external-link fe-12 mr-4"></i>商品详情</a>
                                  <!--                              <a class="dropdown-item" href="#"><i class="fe fe-mail fe-12 mr-4"></i>Contact</a>-->
                                  <!--                              <a class="dropdown-item" href="#"><i class="fe fe-delete fe-12 mr-4"></i>Delete</a>-->
                                </div>
                              </div>
                            </div>
                          </div>
                        </div> <!-- /.card-footer -->
                      </div>
                    </div> <!-- .col -->
                  </th:block>
                  <div class="col-md-9">
                  </div> <!-- .col -->
                </div> <!-- .row -->
                <nav aria-label="Table Paging" class="my-3">

                  <th:block th:if="${page != null}">
                    <input type="hidden" th:value="${page.current}" id="curPage">
                    <ul class="pagination justify-content-end mb-0">
                      <li class="page-item">
                        <a class="page-link" th:if="${page.current > 1}"
                           th:href="@{'?pageNum='+${page.current -1}}">上一页</a>
                      </li>
                      <!--                  <li class="page-item"><a class="page-link" href="#">1</a></li>-->
                      <!--                  <li class="page-item active"><a class="page-link" href="#">2</a></li>-->
                      <!--                  <li class="page-item"><a class="page-link" href="#">3</a></li>-->
                      <li class="page-item">
                        <a class="page-link" th:if="${page.current < ((page.total/page.size)+1)}"
                           th:href="@{'?pageNum='+${page.current +1}}">
                          下一页</a></li>
                    </ul>
                  </th:block>
                </nav>
              </div>
            </div>
          </div> <!-- .col-12 -->
        </div> <!-- .row -->
      </div> <!-- .container-fluid -->
      <div th:replace="~{comm/blank::modal1}"/>
      <div th:replace="~{comm/blank::modal2}"/>

    </main> <!-- main -->
    </div> <!-- .wrapper -->
    <script>
      function tz(){
        let userName = document.getElementById("userName").value
        if(userName==""){
          userName="no"
        }
        window.location.href='/cart/checkout/'+userName;
      }
    </script>
    <script>
      $(document).ready(function(){
        let res = 0
        $.ajax({
          type:'get',
          url:"/cart/checkAmount",
          async:false,
          success:function(result){
            console.log(result)
            res = result
            $('#cartNum').text(res)
          }});
      })
    </script>
    <script th:src="@{/dash/js/jquery.min.js}"></script>
    <script th:src="@{/dash/js/popper.min.js}"></script>
    <script th:src="@{/dash/js/moment.min.js}"></script>
    <script th:src="@{/dash/js/bootstrap.min.js}"></script>
    <script th:src="@{/dash/js/simplebar.min.js}"></script>
    <script th:src="@{/dash/js/daterangepicker.js}"></script>
    <script th:src="@{/dash/js/jquery.stickOnScroll.js}"></script>
    <script th:src="@{/dash/js/tinycolor-min.js}"></script>
    <script th:src="@{/dash/js/config.js}"></script>
    <script th:src="@{/dash/js/apps.js}"></script>
    <script th:src='@{/dash/js/select2.min.js}'></script>
    <script th:src='@{/dash/js/jquery.steps.min.js}'></script>
    <script th:src='@{/dash/js/jquery.validate.min.js}'></script>
    <script th:src='@{/dash/js/jquery.timepicker.js}'></script>
    <script th:src='@{/dash/js/dropzone.min.js}'></script>
    <script th:src='@{/dash/js/uppy.min.js}'></script>
    <script th:src='@{/dash/js/quill.min.js}'></script>
    <script th:src="@{/dash/js/simplebar.min.js}"></script>
    <script th:src="@{/dash/js/tinycolor-min.js}"></script>
    <script th:src="@{/dash/js/d3.min.js}"></script>
    <script th:src="@{/dash/js/topojson.min.js}"></script>
    <script th:src="@{/js/handle/init-price.js}"></script>
    <script th:src="@{/js/handle/cart.js}"></script>
    <script>

      function clickAdd(){
          console.log('add-cart click')
          $.ajax({
            type:'get',
            url:"/shop/cart/increment?itemId="+$(this).siblings('.item-id').val(),
            async:false,
            success:function(result){
              alert('添加成功')
              $('#cartModal').replaceWith($(result).find("#cartModal"))
              $('.add-cart').bind('click',clickAdd())
            }});
          $.ajax({
            type: 'get',
            url: "/cart/checkAmount",
            async: true,
            success: function (result) {
              console.log('check cart amount: ' + result)
              if (result <= 0) {
                // $('#cartTmp').after("<span class=\"dot dot-md bg-success\"></span>")
                $('#cartTmp').css('display','none')
              }
            }
          });
        }

      $(function(){
        $('.add-cart').click(function () {
          console.log('add-cart click')
          $.ajax({
            type:'get',
            url:"/shop/cart/increment?itemId="+$(this).siblings('.item-id').val(),
            async:false,
            success:function(result){
              alert('添加成功')
              $('#cartModal').replaceWith($(result).find("#cartModal"))
              $('.add-cart').bind('click',clickAdd())
            }});
          $.ajax({
            type: 'get',
            url: "/cart/checkAmount",
            async: true,
            success: function (result) {
              console.log('check cart amount: ' + result)
              if (result <= 0) {
                // $('#cartTmp').after("<span class=\"dot dot-md bg-success\"></span>")
                $('#cartTmp').css('display','none')
              }
            }
          });
        })

        //init
        const types = $('.type').find(".typeItem")
        const arr = []
        let idx = 0;
        while (idx < types.length) {
          let tmp = types[idx++]
          let typeTmp = {"id":"", "name":""}
          // console.log(tmp)
          typeTmp["id"]=tmp.value
          typeTmp["name"]=tmp.innerText
          // console.log(typeTmp)
          arr.push(typeTmp)
          // console.log(tmp.innerText)
        }
        console.log(arr)

        $('#submit').click(function () {

          console.log($('#curPage').val())
          console.log($('#startTime1').val()+' '+$('#startTime2').val())
          console.log($('#endTime1').val()+' '+$('#endTime2').val())
          console.log($('#item-name').val())
          //×用复制的 不是x
          let text = $('.selection').find('.select2-selection__choice').text().split('×')
          text.splice(0,1)
          console.log(text)
          let res = []
          for (let i = 0;i < text.length;i++){
            for (const a in arr) {
              if (arr[a].name==text[i]){
                //只要id
                res.push(arr[a].id)
                break
              }
            }
          }
          res=res.map(Number)
          console.log(res)
          const curPage = $('#curPage').val()
          const start = $('#startTime1').val() + ' ' + $('#startTime2').val()+':00'
          const end = $('#endTime1').val() + ' ' + $('#endTime2').val()+':00'
          const typeIdList = res
          const name = $('#item-name').val()
          console.log('ready..')
          $('#time-limit').text(start+' - '+end)
          // const url = '/dashboard/indents?pageNum='+curPage+'&start='+start+'&end='+end+'&typeList='+typeIdList
          const obj = {
            "pageNum": curPage,
            "typeIdList": typeIdList,
            "start": start,
            "end": end,
            "name": name
          }
          console.log(obj)
          $.ajax({
            url: '/dashboard/pick',
            type:"get",
            data: obj,
            contentType:"application/json;charset=utf-8",
            async: false,
            success:function(data){
              console.log(data)
              const newContent = $(data).find("#pick-content")
              console.log(newContent)
              $("#pick-content").replaceWith(newContent)
            }
          })
          // $(document).on('click', '.add-cart', clickAdd($('.add-cart')))
            $('.add-cart').click(function () {
              console.log('add-cart click')
              $.ajax({
                type:'get',
                url:"/shop/cart/increment?itemId="+$(this).siblings('.item-id').val(),
                async:false,
                success:function(result){
                  alert('添加成功')
                  $('#cartModal').replaceWith($(result).find("#cartModal"))
                  $('.add-cart').bind('click',clickAdd())
                }});
              $.ajax({
                type: 'get',
                url: "/cart/checkAmount",
                async: true,
                success: function (result) {
                  console.log('check cart amount: ' + result)
                  if (result <= 0) {
                    // $('#cartTmp').after("<span class=\"dot dot-md bg-success\"></span>")
                    $('#cartTmp').css('display','none')
                  }
                }
              });
            })
          console.log('重新绑定完成')
        })
      });
    </script>

    <script>
      $('.select2').select2(
              {
                theme: 'bootstrap4',
              });
      $('.select2-multi').select2(
              {
                multiple: true,
                theme: 'bootstrap4',
              });
      $('.drgpicker').daterangepicker(
              {
                singleDatePicker: true,
                timePicker: false,
                showDropdowns: true,
                locale:
                        {
                          format: 'YYYY-MM-DD'
                        }
              });
      $('.time-input').timepicker(
              {
                'scrollDefault': 'now',
                'zindex': '9999' /* fix modal open */
              });
      /** date range picker */
      if ($('.datetimes').length)
      {
        $('.datetimes').daterangepicker(
                {
                  timePicker: true,
                  startDate: moment().startOf('hour'),
                  endDate: moment().startOf('hour').add(32, 'hour'),
                  locale:
                          {
                            format: 'M/DD hh:mm A'
                          }
                });
      }
      var start = moment().subtract(29, 'days');
      var end = moment();

      function cb(start, end)
      {
        $('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
      }
      $('#reportrange').daterangepicker(
              {
                startDate: start,
                endDate: end,
                ranges:
                        {
                          'Today': [moment(), moment()],
                          'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                          'Last 7 Days': [moment().subtract(6, 'days'), moment()],
                          'Last 30 Days': [moment().subtract(29, 'days'), moment()],
                          'This Month': [moment().startOf('month'), moment().endOf('month')],
                          'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
                        }
              }, cb);
      cb(start, end);
      $('.input-placeholder').mask("00/00/0000",
              {
                placeholder: "__/__/____"
              });
      $('.input-zip').mask('00000-000',
              {
                placeholder: "____-___"
              });
      $('.input-money').mask("#.##0,00",
              {
                reverse: true
              });
      $('.input-phoneus').mask('(000) 000-0000');
      $('.input-mixed').mask('AAA 000-S0S');
      $('.input-ip').mask('0ZZ.0ZZ.0ZZ.0ZZ',
              {
                translation:
                        {
                          'Z':
                                  {
                                    pattern: /[0-9]/,
                                    optional: true
                                  }
                        },
                placeholder: "___.___.___.___"
              });
      // editor
      var editor = document.getElementById('editor');
      if (editor)
      {
        var toolbarOptions = [
          [
            {
              'font': []
            }],
          [
            {
              'header': [1, 2, 3, 4, 5, 6, false]
            }],
          ['bold', 'italic', 'underline', 'strike'],
          ['blockquote', 'code-block'],
          [
            {
              'header': 1
            },
            {
              'header': 2
            }],
          [
            {
              'list': 'ordered'
            },
            {
              'list': 'bullet'
            }],
          [
            {
              'script': 'sub'
            },
            {
              'script': 'super'
            }],
          [
            {
              'indent': '-1'
            },
            {
              'indent': '+1'
            }], // outdent/indent
          [
            {
              'direction': 'rtl'
            }], // text direction
          [
            {
              'color': []
            },
            {
              'background': []
            }], // dropdown with defaults from theme
          [
            {
              'align': []
            }],
          ['clean'] // remove formatting button
        ];
        var quill = new Quill(editor,
                {
                  modules:
                          {
                            toolbar: toolbarOptions
                          },
                  theme: 'snow'
                });
      }
      // Example starter JavaScript for disabling form submissions if there are invalid fields
      (function()
      {
        'use strict';
        window.addEventListener('load', function()
        {
          // Fetch all the forms we want to apply custom Bootstrap validation styles to
          var forms = document.getElementsByClassName('needs-validation');
          // Loop over them and prevent submission
          var validation = Array.prototype.filter.call(forms, function(form)
          {
            form.addEventListener('submit', function(event)
            {
              if (form.checkValidity() === false)
              {
                event.preventDefault();
                event.stopPropagation();
              }
              form.classList.add('was-validated');
            }, false);
          });
        }, false);
      })();
    </script>


  <script>
    function verifyUserExist(){
        $.ajax({
          type: "GET",
          data:{
            userName:$("#userName").val(),
          },
          url:"/cart/verifyUserExist",
          async:false,
          success(data){
            if (data == "null"){
              document.getElementById("uName").innerHTML="<font color='red'>非会员</font>";
            }
            else{
              document.getElementById("uName").innerHTML="<font color='green'>会员号</font>";
            }
          },
          error(){
            // alert("ajax配置有错，请检查url与type是否正确");
            alert("error");
            console.log(this.data)
          }
        });
    }
  </script>
  </body>
</html>
